<template>
	<view class="container">
		<chunLei-popups v-model="state.isPopupsActive" :popData="dataPopups" @tapPopup="tapPopup" :x="350" :y="0" placement="top-end">
		</chunLei-popups>
		<tui-list-view v-if="pageData.ConversationList.length>0" style="margin-top:0upx">
			<tui-list-cell v-for="item in pageData.ConversationList" :key="item.t_id" @click="getTopicInfo(item)" class="tui-msg">
				<view class="tui-msg-box">
					<view :style="'background-image:url('+item.t_icon+')'" class="tui-msg-pic" mode="widthFix"></view>

					<view class="tui-msg-item">
						<view class="tui-msg-name">{{item.t_title}}</view>
						<view class="tui-msg-content">{{item.t_content}}</view>
					</view>
				</view>
				<view class="tui-msg-right">
					<view class="tui-msg-time">{{item.t_time |dateFormat("MM-DD HH:mm")}}</view>
					<tui-badge v-if="item.t_unReadCount>0" type="danger" class="tui-badge">{{item.t_unReadCount}}</tui-badge>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<view v-else class="no-data" style="padding-top:60px">
			<kmlc-no-data></kmlc-no-data>

		</view>
		
	</view>
</template>



<script>
	import {
		PushMsg,
		DB,
		user,
		tools
	} from '@/common/framework'
	import chunLeiPopups from '@/components/other-com/chunLei-popups/chunLei-popups'
	import moment from 'moment';
	export default {
		components: {
			chunLeiPopups
		},
		data() {
			return {
				curUserInfo:{},
				state: {
					isPopupsActive: false
				},
				pushMsg: PushMsg.init(),
				db: DB.init('push-msg'),
				pageData: {
					ConversationList: []
				},
				dataPopups: [{
						title: '创建群聊',
						icon: '../../static/chuangjianqunliao-lan.png',
						disabled: false
					},
					{
						title: '加好友/群',
						icon: '../../static/tianjiahaoyou.png'
					},
					{
						title: '加入群',
						icon: '../../static/scan_icon.png'
					}

				]

			}
		},
		computed: {

		},
		onLoad() {
			this.pushMsg=PushMsg.init();
			this.curUserInfo = user.getUserInfo();
			this.getConversationList();
			this.bindEvent();

		},
		onShow() {
			console.log(this.curUserInfo);
			setTimeout(() => { //这里必须要有，因为有可能在使用期间，链接断开，再次点击消息，可以激活重新连接，必须要延时，否则会以app.vue 中的 mqtt创建冲突，造成连接失败，
				if (!this.pushMsg.IsConnent) {
					//tools.toast('推送服务连接断开，重新初始化');
					this.pushMsg.initPush().then(ret => {}).catch(err => {
						console.log(JSON.stringify(err));
					});
				} else {
					//tools.toast('推送服务连接成功');
				}

			}, 1000);

		},
		onHide() {

		},
		onBackPress() {

		},
		onNavigationBarButtonTap() {
			this.state.isPopupsActive = !this.state.isPopupsActive;
		},
		onPullDownRefresh() {
			
			this.getConversationList();
			uni.stopPullDownRefresh();
		},
		methods: {

			bindEvent() {
				uni.$on('onMessageArrived', (data) => {
					console.log("收到消息通知");
					this.$nextTick(()=>{
						this.getConversationList();
					})
				
				});

				uni.$on('clearMessagesUnreadStatus', (data) => {
					uni.removeTabBarBadge({
						index: 0
					});
					console.log("clearMessagesUnreadStatus");
					this.getConversationList();
				});
			},


			async getConversationList() {
				try {
					
					let topicItems = await this.db.selectSql("select * from topic where t_userId='" + this.curUserInfo.userId +"' order by t_isTop desc, t_time desc ");
					console.log(topicItems);
					this.pageData.ConversationList.splice(0,this.pageData.ConversationList.length);
					if (topicItems && topicItems.length > 0) {
						
						for(let i=0;i<topicItems.length;i++){
							console.log("topicItem", topicItems[i]);
							this.pageData.ConversationList.push(topicItems[i]);
						}
						// this.pageData.ConversationList = topicItems;
					}

					let rows = await this.pushMsg.getTopicUnReadCount();
					
					if (Number(rows[0].count) > 0) {
						uni.setTabBarBadge({
							index: 0,
							text: rows[0].count + ''
						});
					} else {
						uni.removeTabBarBadge({
							index: 0
						})
					}


				} catch (err) {
					console.log(JSON.stringify(err));
					tools.toast('获取对话列表失败');
				}

			},

			

			tapPopup(e) {
				switch (e.title) {
					case '创建群聊':
					uni.navigateTo({
						url: '/pages/message/group/group-create'
					})
					break;
					case '加入群':
						uni.scanCode({
							scanType: 'qrCode',
							success: (ret) => {
								console.log(ret);
							}
						});
						break;
				};

			},

			getTopicInfo(item) {
				if (item.t_msgType == "group" || item.t_msgType == "user") { //聊天
					uni.navigateTo({
						url: '/pages/message/topic-info/topic-info-user-msg?topic=' + encodeURIComponent(JSON.stringify(item))
					})
				} else { //系统通知
					uni.navigateTo({
						url: '/pages/message/topic-info/topic-info-sys-msg?topic=' + encodeURIComponent(JSON.stringify(item))
					})
				}
			}

			
		}
	}
</script>

<style lang="scss" scope>
	.container{

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		display: block;
		margin-right: 24upx;
		background-size: cover;
		background-position: center;
	}

	.tui-msg-item {
		max-width: 450upx;
		min-height: 80upx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34upx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26upx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;
	}

	.tui-msg-time {
		width: 150upx;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}

	.tui-badge {
		width: auto
	}

	// .tui-msg::after {
	// 	left: 154upx !important
	// }
	}
</style>
